<template>
  <div class="myhome">
    <div class="header">
      <div class="logo">
        <img src="../image/logo.png" alt />
      </div>
      <div class="tab">
        <div class="tab-item" @click="clickTab(1)">首页</div>
        <div
          class="tab-item"
          @click="clickTab(2)"
          v-if="userinfo == null || (userinfo && userinfo.type == 'student')"
        >
          去上课
        </div>
        <div
          class="tab-item"
          v-if="userinfo == null || (userinfo && userinfo.type == 'student')"
          @click="clickTab(6)"
        >
          教师资源
        </div>
        <div class="tab-item"  v-if="userinfo && userinfo.type == 'teacher'" @click="clickTab(3)">学习资源</div>
        <div class="tab-item" @click="clickTab(4)">论坛</div>
      </div>
    
      <div class="userinfo">
        <div class="username">{{ username }}</div>
        <el-button
          :plain="true"
          style="border: none; width: 70px; height: 35px"
          @click="exit()"
          v-if="userinfo != null && userinfo.type != null"
          >退出</el-button
        >
      </div>
      <router-link
        :to="{ path: '/mylogin' }"
        class="gotologin"
        v-if="userinfo == null"
        >去登陆</router-link
      >
    </div>
    <!-- 首页 -->
    <div class="content">
      <el-carousel
        indicator-position="outside"
        height="500px"
        v-if="activeIndex == 1"
      >
        <el-carousel-item v-for="(item, index) in Imgitem" :key="index">
          <img :src="item" class="rightImg" />
        </el-carousel-item>
      </el-carousel>

      <div class="sights-photo" v-if="activeIndex == 1">
        <h1>学习 —— 创造更好的未来！！！</h1>
        <div class="img-list">
          <img src="../image/body.jpg" alt />
        </div>
      </div>
      <div class="footer" v-if="activeIndex == 1">
        <img src="../image/footer.jpg" alt />
      </div>
    </div>

    <!-- 去学习 -->
    <div class="card-list" v-if="activeIndex == 2" v-loading="loading">
      <div class="card-item" v-for="item in list" :key="item.id">
        <div class="card-img"><img :src="petImage(item)" /></div>
        <div class="card-title">{{ item.name }}</div>
        <div class="card-bottom">
          <div class="card-text">简介:{{ item.description }}</div>
          <el-button
            type="text"
            @click="goStudy(item.id)"
            style="font-size: 15px"
            class="button"
            >去学习</el-button
          >
        </div>
      </div>
    </div>

    <div
      v-if="activeIndex == 6"
      class="content"
      style="padding: 30px 100px 0 100px"
    >
      <div class="searchBtn" style="display: flex">
        <h3>题库文件</h3>
      </div>
      <div
        class="searchBtn"
        style="width: 20%; display: flex; padding-top: 30px"
      ></div>
      <el-table :data="list1" stripe style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="文件名" width="180">
        </el-table-column>
        <el-table-column prop="createByName" label="上传人" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="downFile(scope.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 教师文件 -->
    <div
      v-if="activeIndex == 3"
      class="content"
      style="padding: 30px 100px 0 100px"
    >
      <div class="searchBtn" style="display: flex">
        <h3>学习资源</h3>
        <el-upload
          :headers="headers"
          :action="action"
          :data="data"
          :on-success="success"
          multiple
          :file-list="fileList"
        >
          <el-button
            style="margin-left: 20px; height: 30px; align-items: center"
            type="primary"
            >上传<i class="el-icon-upload el-icon--right"></i
          ></el-button>
        </el-upload>
      </div>
      <div
        class="searchBtn"
        style="width: 20%; display: flex; padding-top: 30px"
      ></div>
      <el-table :data="list2" stripe style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="文件名" width="180">
        </el-table-column>
        <el-table-column prop="createByName" label="上传人" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-download"
                @click="downFile(scope.row)"
                >下载</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteFileById(scope.row)"
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="myFiles"
        :current-page.sync="pageNo_file"
        :page-size="pageSize"
        :total="total_file"
        layout="total, prev, pager, next"
      ></el-pagination>
    </div>

    <!-- 论坛 -->
    <div class="comment" v-if="activeIndex == 4">
      <div class="title"><h3>留言板</h3></div>
      <div class="block">
        <el-timeline v-for="item in list3" :key="item.id">
          <el-timeline-item :timestamp="item.createTime" placement="top">
            <el-card>
              <h4>{{ item.createByName }}：</h4>
              <p>{{ item.text }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div class="input-text">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
          <el-form-item label="留言" prop="text">
            <el-input
              v-model="ruleForm.text"
              type="textarea"
              :rows="2"
              style="padding-bottom: 10px"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>

        <el-button
          size="small"
          :headers="headers"
          @click="submitForm('ruleForm')"
          icon="el-icon-edit"
          style="height: 35px"
        ></el-button>
      </div>
    </div>

    <!-- 信息修改 -->
    <div class="content" v-if="activeIndex == 5">
    </div>
  </div>
</template>

<script>
import p1 from "../image/1.jpg";
import p2 from "../image/2.jpg";
import p3 from "../image/3.png";
import axios from "../request/axios";
import cookie from "js-cookie";
import adminRequest from "../request/admin";
import indexRequest from "../request/index";
export default {
  data() {
    var text = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("内容不能为空"));
      } else {
        return callback();
      }
    };

    return {
      action: axios.defaults.baseURL + "file/upload",

      data: {
        dataId: Math.random().toString(36).substr(3, 6) + Date.now().toString(),
      },

      headers: {
        satoken: cookie.get("satoken"),
      },
      fileList: [],
      loading: false, //加载状态控制
      activeIndex: "1", //菜单切换
      Imgitem: [p1, p2, p3], //轮播图列表
      search: "",
      search2: "",
      userinfo: null,
      username: "",

      list: [],
      pageSize: 10,
      pageNo_teacher: 1,
      total_teacher: null,
      teacherDetail: [],

      list1: [],

      list2: [],
      search3: "",
      pageNo_file: 1,
      total_file: null,

      list3: [],

      ruleForm: {
        text: "",
      },

      rules: {
        text: [{ validator: text, trigger: "blur" }],
      },
    };
  },

  methods: {
    // 点击切换菜单
    clickTab(index) {
      this.activeIndex = index;
      this.loading = true;
      if (index == 5 && this.userinfo == null) {
        this.$router.push({ path: "/mylogin" });
      }
      if (index == 6 && this.userinfo == null) {
        this.$router.push({ path: "/mylogin" });
      }
      if (index == 3 && this.userinfo == null) {
        this.$router.push({ path: "/mylogin" });
      }
      this.getTeacherList();
      this.myFiles();
      this.getCommentList();
    },

    // 退出
    exit() {
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.go();
      this.$message.success("注销成功!");
    },

    // 照片
    petImage(item) {
      var url = axios.defaults.baseURL + "file/getPhoto/" + item.photo;
      console.log(url);
      return url;
    },

    // 题库
    goStudy(id) {
      this.activeIndex = 6;
      if (this.activeIndex == 6 && this.userinfo == null) {
        this.$router.push({ path: "/mylogin" });
      }
      indexRequest.getFiles(id).then((res) => {
        if (res.data.code == 200) {
          const result = res.data.result;
          this.list1 = result;
          console.log(list1);
          setTimeout(() => {
            this.loading = false;
          }, 500);
        }
      });
    },

    success(res) {
      if (res.success) {
        this.myFiles();
      }
    },

    // 删除附件
    deleteFileById(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          indexRequest.deleteFileById(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.myFiles();
            }
          });
        })
        .catch(() => {});
    },

    // 下载附件
    downFile(item) {
      window.location.href =
        axios.defaults.baseURL + "/file/download/" + item.id;
    },

    // 附件列表
    myFiles(page = 1) {
      this.pageNo = page;
      indexRequest
        .myFiles({
          pageNo: this.pageNo_file,
          pageSize: this.pageSize,
          name: this.search3,
        })
        .then((res) => {
          if (res.data.code == 200) {
            const result = res.data.result;
            this.total_file = result.total;
            this.list2 = result.records;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },

    // 论坛
    getCommentList() {
      indexRequest.getCommentList().then((res) => {
        const result = res.data.result;
        this.list3 = result;
      });
    },

    // 添加评论
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          indexRequest
            .editComment({
              text: this.ruleForm.text,
            })
            .then((res) => {
              if (res.data.success == true) {
                this.$message.success("添加成功!");
                this.resetForm();
                this.getCommentList();
              } else {
                this.$message.error("请先登录哦！");
              }
            });
        } else {
          this.$message.error("不能发送空消息！");
          return false;
        }
      });
    },

    // 清空表单数据（element自带的判断）
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

    // 教师
    getTeacherList(page = 1) {
      this.pageNo = page;
      adminRequest
        .getTeacherList({
          pageNo: this.pageNo_teacher,
          pageSize: this.pageSize,
          name: this.search2,
        })
        .then((res) => {
          if (res.data.code == 200) {
            const result = res.data.result;
            this.total_teacher = result.total;
            this.list = result.records;
            setTimeout(() => {
              this.loading = false;
            }, 500);
          }
        });
    },
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

    if (this.userinfo != null) {
      if (this.userinfo.type == "admin") {
        this.$router.push({ path: "/adminHome" });
      }
      if (this.userinfo.type == "teacher" || this.userinfo.type == "student") {
        this.$router.push({ path: "/" });
      }
      console.log(this.userinfo);
      this.username = this.userinfo.userName;
    }
    this.getTeacherList();
    this.myFiles();
    this.getCommentList();
  },
};
</script>

<style lang="scss" scoped>
@import "../css/myHome.scss";
</style>